<template>
  <div class="user-container">
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span>基本资料</span>
      </div>
      <div class="text item">
        <el-form :model="userForm"
                 :rules="rules"
                 ref="userForm"
                 label-width="100px"
                 class="demo-userForm">
          <el-form-item label="登录名称"
                        prop="username">
            <el-input placeholder="请输入内容"
                      v-model="userForm.username"
                      :disabled="true"
                      style="width:400px">
            </el-input>
          </el-form-item>
          <el-form-item label="用户昵称"
                        prop="nickname">
            <el-input v-model="userForm.nickname"
                      style="width:400px"></el-input>
          </el-form-item>
          <el-form-item prop="email"
                        label="用户邮箱">
            <el-input v-model="userForm.email"
                      style="width:400px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm('ruleForm')">提交修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserinfo, setUserinfo } from '@/api/user'
export default {
  name: 'UserPage',
  data () {
    return {
      userForm: {
        id: '',
        username: '',
        nickname: '',
        email: '',
        user_pic: ''
      },
      rules: {
        nickname: [],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created () {
    this.getUserinfo()
  },
  methods: {
    async getUserinfo () {
      const res = await getUserinfo()
      console.log(res)
      this.userForm.username = res.data.data.username
      // this.userForm = res.data.data
    },
    submitForm () {
      this.$refs.userForm.validate(async isOK => {
        const res = await setUserinfo(this.userForm)
        console.log(res)
        this.$message.success('更新数据成功')
      })
    },
    resetForm () {
      this.getUserinfo()
    }
  }
}
</script>

<style>
</style>
